<template>
	<view>
		<!-- <text class="text-box">这是主页</text>
		<text class="info">我是主页的一段文案</text> -->

		<swiper class="home-swiper" indicator-dots="true" autoplay="true" :interval="2000">
			<swiper-item v-for="(i,index) in list" :key="index">
				<view class="swiper-item uni-bg-red">
					<image :src="i" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		
		<uni-title @getTitle="getTitleFun($event)" title1="朝夕名师" title2="在线直播" text1="直播互动学习，感受技术韵律"></uni-title>
		
		<view class="public-box">
			<view @click="goPublic(i.url,i.text)" v-for="i in publicList" :key="i.url" class="public-list">
				<image :src="i.img" mode=""></image>
				<text>{{i.text}}</text>
			</view>
		</view>
		
		<uni-title  title1="加入" title2="朝夕" text1="让每个人的职业生涯不留遗憾"></uni-title>
		<view class="recruitSmall-box">
			<view v-for="(i,index) in recruitSmall" :key="index" class="recruitSmall-list">
				<image :src="i.img" mode=""></image>
				<view class="recruitSmall-text-box">
					<text class="recruitSmall-text-title">{{i.title}}</text>
					<text>{{i.text}}</text>
				</view>
			</view>
		</view>
		<uni-title  title1="合作" title2="伙伴" text1="人生道路上伙伴的支撑不可或缺"></uni-title>
		
		<view class="buddy-box">
				<image class="buddy-list" v-for="i in buddy" :src="i.img" :key="i.img"  mode=""></image>
		</view>
	</view>
</template>

<script>
	import {getCouesel} from '../../httpt/api.js'
	export default {
		data() {
			return {
				list : ['https://m.zhaoxiedu.net/static/imgs/carousel/MVP.jpg',
				'https://m.zhaoxiedu.net/static/imgs/carousel/MVP.jpg',
				'https://m.zhaoxiedu.net/static/imgs/carousel/MVP.jpg',
				'https://m.zhaoxiedu.net/static/imgs/carousel/MVP.jpg'],
				publicList:[],
				recruitSmall:[],
				buddy:[]
			}
		},
		onLoad() {
			getCouesel().then(res=>{
				this.list = res.data.data
			})
			
			uni.request({
			    url: 'https://www.fastmock.site/mock/b5b84dc2a6df42eb062ed5ee7bd72b4a/uni/getPublic', 
			    success: (res) => {
			        // console.log(res.data);
					this.publicList = res.data.data
			        // this.text = 'request success';
			    }
			});
			uni.request({
			    url: 'https://www.fastmock.site/mock/b5b84dc2a6df42eb062ed5ee7bd72b4a/uni/getRecruitSmall', 
			    success: (res) => {
			        // console.log(res.data);
					this.recruitSmall = res.data.data
			        // this.text = 'request success';
			    }
			});
			uni.request({
			    url: 'https://www.fastmock.site/mock/b5b84dc2a6df42eb062ed5ee7bd72b4a/uni/getBuddy',
			    success: (res) => {
			        // console.log(res.data);
					this.buddy = res.data.data
			        // this.text = 'request success';
			    }
			});
		},
		methods: {
			getTitleFun(text){
				console.log(text)
			},
			goPublic(url,title){
				// console.log(url)
				uni.navigateTo({
				    url: `/pages/piblicView/piblicView?url=${url}&title=${title}`
				});
			}
		} 
	}
</script>

<style scoped>
	
	.swiper-item image{
		width: 100%;
			height: 120px;
			height: 200px;
		
	}
	.public-box,
	.buddy-box{
		display:flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
	}
	.public-list{
		width: 48%;
		height: 120px;
		margin-bottom: 40px;
		text-align: center;
	}
	.public-list image{
		width: 100%;
			height: 100px;
			height: 120px;
		margin-bottom: 5px;
	}
	.public-list text{
		font-size: 14px;
		color: #333;
	}
	.recruitSmall-box{
		padding: 10px;
	}
	.recruitSmall-list{
		display: flex;
		flex-direction: row;
		margin-bottom: 10px;
	}
	.recruitSmall-list image{
		width: 40%;
		height: 120px;
		margin-right: 10px;
		border-radius: 10px;
	}
	.recruitSmall-text-box{
		flex:1;
		display: flex;
		flex-direction: column;
		color: #333;
		font-size: 12px;
	}
	.recruitSmall-text-title{
		font-weight: 600;
		margin: 5px 0;
		font-size: 16px;
	}
	.buddy-box .buddy-list{
		width: 30%;
		height: 60px;
	}
</style>
